<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>收银对账</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/tabletable.css" rel="stylesheet" />
		<link href="../assets/css/motai.css" rel="stylesheet" />
		<link href="../assets/css/content.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
		<style type="text/css">
			.firstth {
				width: 130px !important;
			}
			
			.firsttd {
				width: 130px !important;
			}
			
			.secondta {
				padding-left: 145px !important;
			}
		</style>
	</head>

	<body>
		<!--内容区域-->
		<div class="content">

			<!-- 头部的餐厅选择 -->
			<div class="content-header col-md-12">
				<div class="con-header">
					<div class="col-md-7 col-sm-7 col-xs-7">
						<span class="content-title-pre"></span><span class="content-title-word">收银对账</span>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-5">
						<button type="button" class="btn btn-info btn-header" data-toggle="modal" data-target="#xuanze-store">选择门店</button>
					</div>
				</div>
			</div>
			<div class="row">
				
			</div>
			<!-- botstrop 的内容 -->
			<div class="cashier-status mt20">
				<div class="cashier-item">
					<span class="today dayxuanze">今日</span>
					<span class="yesterday">昨日</span>
					<span class="month">本月</span>
				</div>
				<div class="cashier-content today-con">
					<div class="content-item">
						<span>结算一：金额164.00元</span>
						<span>收银时间：2016-11-10 12：37</span>
						<span>操作员：徐立新</span>
					</div>
					<div class="paytable">
						<div class="table-responsive mt20">
							<table class="table">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">支付类</th>
										<th class="secondta">微支付</th>
										<th>微储值</th>
										<th>微卡券</th>
										<th>微优惠</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
					<div class="chargetable">
						<div class="table-responsive mt20">
							<table class="table">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">充值类</th>
										<th class="secondta">现金充值</th>
										<th>银联充值</th>
										<th>支付宝充值</th>
										<th>在线充值</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号</td>
										<td>查看明细</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
							<div class="page-page flr">
								<ul class="pagination">
									<li class="epage">
										<a href="#">上一页</a>
									</li>
									<li class="active">
										<a href="#">1 <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<!--<li><a href="#">4</a></li>-->
									<li>
										<a href="#">...</a>
									</li>
									<li class="epage">
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>
							<div class="page-num flr">共9页，每页10条</div>
						</div>
					</div>
				</div>
				<div class="cashier-content yesterday-con hide">
					<div class="content-item">
						<span>结算一：金额164.00元</span>
						<span>收银时间：2016-11-10 12：37</span>
						<span>操作员：徐新</span>
					</div>
					<div class="paytable">
						<div class="table-responsive mt20">
							<table class="table">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">支付类</th>
										<th class="secondta">微支付</th>
										<th>微储值</th>
										<th>微卡券</th>
										<th>微优惠</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
					<div class="chargetable">
						<div class="table-responsive mt20">
							<table class="table">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">充值类</th>
										<th class="secondta">现金充值</th>
										<th>银联充值</th>
										<th>支付宝充值</th>
										<th>在线充值</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
							<div class="page-page flr">
								<ul class="pagination">
									<li class="epage">
										<a href="#">上一页</a>
									</li>
									<li class="active">
										<a href="#">1 <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<!--<li><a href="#">4</a></li>-->
									<li>
										<a href="#">...</a>
									</li>
									<li class="epage">
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>
							<div class="page-num flr">共9页，每页10条</div>
						</div>
					</div>
				</div>
				<div class="cashier-content  month-con hide">
					<div class="content-item">
						<span>结算一：金额164.00元</span>
						<span>收银时间：2016-11-10 12：37</span>
						<span>操作员：徐新历</span>
					</div>
					<div class="paytable">
						<div class="table-responsive mt20">
							<table class="table">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">支付类</th>
										<th class="secondta">微支付</th>
										<th>微储值</th>
										<th>微卡券</th>
										<th>微优惠</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款核对</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
					<div class="chargetable">
						<div class="table-responsive mt20">
							<table class="table">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">充值类</th>
										<th class="secondta">现金充值</th>
										<th>银联充值</th>
										<th>支付宝充值</th>
										<th>在线充值</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="mytable">
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">营业付款</td>
										<td class="secondta">好好好</td>
										<td>22222</td>
										<td>1233444444</td>
										<td>哈哈哈挂号费</td>
										<td>查看明细</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
							<div class="page-page flr">
								<ul class="pagination">
									<li class="epage">
										<a href="#">上一页</a>
									</li>
									<li class="active">
										<a href="#">1 <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<!--<li><a href="#">4</a></li>-->
									<li>
										<a href="#">...</a>
									</li>
									<li class="epage">
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>
							<div class="page-num flr">共9页，每页10条</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="xuanze-store" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">

						<!--添加评价项 -->
						<div class="modal-header">
							<div class="zuo-close" data-dismiss="modal">
								<i class="iconfont icon-o1"></i>
							</div>
							<h5 class="modal-title" id="myModalLabel">选择门店</h5>
						</div>
						<div class="modal-body height232">

							<div class="row select_mendian_row">
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>

							</div>

						</div>
						<div class="modal-footer shangjiaguanli_foot">
							<button type="button" class="btn save">确定</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>
			<script src="../assets/js/jquery.min.js"></script>
			<script src="../assets/js/bootstrap.min.js"></script>
			<script src="../assets/js/main.js"></script>
			<script type="text/javascript">
			//选择门店
			$('.select_mendian_row span').on('click',function(){
          $(this).parent().siblings().children('span').removeClass('active');
          $(this).addClass('active')
        })
				colorStyle();
				// 给奇数行和偶数行不同的颜色
				function colorStyle() {
					$(".mytable").find("tr:even").addClass("oushu");
					$(".mytable").find("tr:odd").addClass("jishu");
					$(".mytable").find("tr:odd td:first-child").addClass("jishu");
				}

				// 给第一列高度
				firstTrHeight()

				function firstTrHeight() {
					for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
						var trht = $(".mytable tr")[i].offsetHeight
						var domtr = $(".mytable tr")[i];
						// 有30px的边距
						$(domtr).children('td').height(trht - 30);
						$(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
					};
				}
				$(".today").on('click', function() {
					$(".today-con").removeClass("hide");
					$(".yesterday-con").addClass("hide");
					$(".month-con").addClass("hide");
					$(this).addClass("dayxuanze");
					$('.yesterday').removeClass("dayxuanze");
					$('.month').removeClass("dayxuanze");
					firstTrHeight();
				})
				$(".yesterday").on('click', function() {
					$(".today-con").addClass("hide");
					$(".month-con").addClass("hide");
					$(".yesterday-con").removeClass('hide');
					$(this).addClass("dayxuanze");
					$('.today').removeClass("dayxuanze");
					$('.month').removeClass("dayxuanze");
					firstTrHeight();
				})
				$(".month").on('click', function() {
					$(".today-con").addClass("hide");
					$(".month-con").removeClass("hide");
					$(".yesterday-con").addClass('hide');
					$(this).addClass("dayxuanze");
					$('.today').removeClass("dayxuanze");
					$('.yesterday').removeClass("dayxuanze");
					firstTrHeight()
				})
			</script>
	</body>

</html>